<template>
	<view>
		<view class="father">
			<view class="fixAuto bb middle ">
				<view class="w100">
					{{title}}
				</view>
				<view class="text-right">
					{{list[index]}}
					<text class="ml5 sIcon-arrowRight grey"></text>
				</view>
			</view>
			<picker class="op0 abs" mode="selector" :range="list" :value="index" @change="changeFactor">
				<view class="op0 abs">{{factor}}</view>
			</picker>
		</view>
		<view class="fixAuto bb middle" v-show="isOther">
			<view class="w100">
				其他{{title}}
			</view>
			<view>
				<input type="text" :name="name"  :maxlength="maxlength" v-model="factor" :placeholder="`请输入${title}`">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'choosePicker',
		data() {
			return {
				factor : "" ,
				isOther : false 
			};
		},
		props: {
			title : {
				default : ""
			},
			name : {
				default : ""
			},
			maxlength : {
				default : ""
			},
			list:{
				default : function(e){
					return [] ;
				},
			},
			index:{
				default : 0
			}
		},
		
		watch:{
			list : {
				handler : function(e){
					var factor = this.list[this.index];
					this.isOther = factor == '其他' ;
					this.factor = factor == '其他' ? '' : factor ;
				},
				immediate : true 
			},
			index : function(e){
				var factor = this.list[this.index];
				this.factor = factor == '其他' ? '' : factor ;
			},
			factor : {
				handler : function(e){
					console.log("factorChanged: ",this.factor);
					this.$emit("factorChanged" , this.factor );
				},
				immediate : true 
			}
		},
		
		methods: {
			changeFactor:function(e){
				var index = e.detail.value ;
				var factor = this.list[index] ;
				this.isOther = factor == '其他' ;
				this.factor = factor == '其他' ? '' : factor ;
				this.$emit("change",{index , factor});
			},
			
		}
	}
</script>
